<template>
  <!--  <div class="col-xl-9 col-lg-8  col-md-12">-->
  <div class="card shadow-sm ctm-border-radius">
    <div class="card-body align-center">
      <div class="tab-content" id="v-pills-tabContent">

        <!-- Tab1-->
        <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
          <div class="employee-office-table">
            <div class="table-responsive">
              <table class="table custom-table table-hover">
                <thead>
                <tr>
                  <th>从事行业</th>
                  <th>头像/姓名</th>
                  <th>综合分数</th>
                  <th>工龄</th>
                  <!--                    <th>Status</th>-->
                  <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item,index) in employees" key="id">
                  <td>{{ item.wanted }}</td>
                  <td>
                    <router-link to="/nebula/employee/1" class="avatar" @click.native="flushCom()"><img
                      class="img-fluid" alt="avatar image"
                      :src="item.img"></router-link>
                    <h2>
                      <router-link to="/nebula/employee/1" @click.native="flushCom()"> {{ item.name }}</router-link>
                    </h2>
                  </td>
                  <td>{{ item.score }}</td>
                  <td>{{ item.workage }}</td>
                  <td>
                    <div class="table-action" @click="clickStar(index)">
                      <a href="javascript:void(0);"
                         class="btn btn-sm btn-outline-success">
                        <span class="lnr lnr-star"></span> {{ item.flag?'取消':'收藏' }}
                      </a>
                      <a href="javascript:void(0);" class="btn btn-sm btn-outline-danger" data-toggle="modal"
                         data-target="#delete">
                        <span class="lnr lnr-trash"></span> 删除
                      </a>
                    </div>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <!--/Tab 1-->

        <!-- Tab2-->
        <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
          <div class="employee-office-table">
            <div class="table-responsive">
              <table class="table custom-table table-hover">
                <thead>
                <tr>
                  <th>Name</th>
                  <th>Created By</th>
                  <th>Scheduled For</th>
                  <th>Actions</th>
                </tr>
                </thead>
                <tbody>

                <tr>
                  <td>Monthly Review</td>
                  <td>
                    <a href="employment.html" class="avatar"><img class="img-fluid" alt="avatar image"
                                                                  src="../assets/img/profiles/img-10.jpg"></a>
                    <h2><a href="employment.html"> Richard Wilson</a></h2>
                  </td>
                  <td>
                    Everyone
                  </td>
                  <td>
                    <div class="table-action">
                      <a href="http://dreamguys.co.in/demo/dleohr/dleohr/edit-review.html"
                         class="btn btn-sm btn-outline-success">
                        <span class="lnr lnr-pencil"></span> Edit
                      </a>
                      <a href="javascript:void(0);" class="btn btn-sm btn-outline-danger" data-toggle="modal"
                         data-target="#delete">
                        <span class="lnr lnr-trash"></span> Delete
                      </a>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>Employees Review</td>
                  <td>
                    <a href="employment.html" class="avatar"><img class="img-fluid" alt="avatar image"
                                                                  src="../assets/img/profiles/img-10.jpg"></a>
                    <h2><a href="employment.html"> Richard Wilson</a></h2>
                  </td>
                  <td>
                    Everyone
                  </td>
                  <td>
                    <div class="table-action">
                      <a href="http://dreamguys.co.in/demo/dleohr/dleohr/edit-review.html"
                         class="btn btn-sm btn-outline-success" @click="star">
                        <span class="lnr lnr-pencil"></span> Edit
                      </a>
                      <a href="javascript:void(0);" class="btn btn-sm btn-outline-danger" data-toggle="modal"
                         data-target="#delete">
                        <span class="lnr lnr-trash"></span> Delete
                      </a>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>Employees Review</td>
                  <td>
                    <a href="employment.html" class="avatar"><img class="img-fluid" alt="avatar image"
                                                                  src="../assets/img/profiles/img-10.jpg"></a>
                    <h2><a href="employment.html"> Richard Wilson</a></h2>
                  </td>
                  <td>
                    Everyone
                  </td>
                  <td>
                    <div class="table-action">
                      <a href="http://dreamguys.co.in/demo/dleohr/dleohr/edit-review.html"
                         class="btn btn-sm btn-outline-success">
                        <span class="lnr lnr-pencil"></span> Edit
                      </a>
                      <a href="javascript:void(0);" class="btn btn-sm btn-outline-danger" data-toggle="modal"
                         data-target="#delete">
                        <span class="lnr lnr-trash"></span> Delete
                      </a>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>Employees Review</td>
                  <td>
                    <a href="employment.html" class="avatar"><img class="img-fluid" alt="avatar image"
                                                                  src="../assets/img/profiles/img-10.jpg"></a>
                    <h2><a href="employment.html"> Richard Wilson</a></h2>
                  </td>
                  <td>
                    Everyone
                  </td>
                  <td>
                    <div class="table-action">
                      <a href="http://dreamguys.co.in/demo/dleohr/dleohr/edit-review.html"
                         class="btn btn-sm btn-outline-success">
                        <span class="lnr lnr-pencil"></span> Edit
                      </a>
                      <a href="javascript:void(0);" class="btn btn-sm btn-outline-danger" data-toggle="modal"
                         data-target="#delete">
                        <span class="lnr lnr-trash"></span> Delete
                      </a>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>Employees Review</td>
                  <td>
                    <a href="employment.html" class="avatar"><img class="img-fluid" alt="avatar image"
                                                                  src="../assets/img/profiles/img-10.jpg"></a>
                    <h2><a href="employment.html"> Richard Wilson</a></h2>
                  </td>
                  <td>
                    Everyone
                  </td>
                  <td>
                    <div class="table-action">
                      <a href="http://dreamguys.co.in/demo/dleohr/dleohr/edit-review.html"
                         class="btn btn-sm btn-outline-success">
                        <span class="lnr lnr-pencil"></span> Edit
                      </a>
                      <a href="javascript:void(0);" class="btn btn-sm btn-outline-danger" data-toggle="modal"
                         data-target="#delete">
                        <span class="lnr lnr-trash"></span> Delete
                      </a>
                    </div>
                  </td>
                </tr>

                </tbody>
              </table>
            </div>
          </div>
        </div>
        <!-- /Tab 2-->

      </div>
    </div>
  </div>

  <!--  </div>-->
</template>

<script>
export default {
  name: "Line",
  data() {
    return {
      star: '收藏',
      employees: [
        {img:require('@/assets/img/profiles/5.jpg'), id: 1, name: '付志强', score: 98, wanted: '营销策划', flag: false, workage: 2},
        {img:require('@/assets/img/profiles/4.jpg'), id: 2, name: '陈怡含', score: 95, wanted: '前端设计', flag: false, workage: 4},
        {img:require('@/assets/img/profiles/6.jpg'), id: 3, name: '莫奕', score: 95, wanted: '营销策划', flag: false, workage: 3},
        {img:require('@/assets/img/profiles/7.jpg'), id: 4, name: '夏国利', score: 93, wanted: '软件测试', flag: false, workage: 2},
        {img:require('@/assets/img/profiles/8.jpg'), id: 5, name: '杨一平', score: 91, wanted: '营销策划', flag: false, workage: 5},
        {img:require('@/assets/img/profiles/1.jpg'), id: 6, name: '左然', score: 90, wanted: '网络工程', flag: false, workage: 6},
        {img:require('@/assets/img/profiles/3.jpg'), id: 7, name: '王丽丽', score: 89, wanted: '硬件工程师', flag: false, workage: 7},
        {img:require('@/assets/img/profiles/5.jpg'), id: 8, name: '林宇', score: 85, wanted: '营销策划', flag: false, workage: 2},
      ]
    }
  },
  methods: {
    flushCom: function () {
      this.$router.go(0);
    },
    clickStar: function (index) {
      this.employees[index].flag = !this.employees[index].flag;
    }
  }
}
</script>

<style scoped>

</style>
